Docked Utility Bar

Docked Utility Bar

Feedback
Ungrouped

information

You are currently viewing a sandbox preview version of Spring ’19 | Go back to Winter ’19

Docked utility bar is a persistent bar that allows a user to continually use the app to complete tasks while expanding/collapsing utility panels.

BaseDesktop OnlyRequires ui:scrollerWrapper

Preview

About Base

Fixed bar at the bottom of viewport, that contains items.

If the utility bar item is active and its panel is popped open in a new window, use .slds-utility-bar__item_pop-out on the .slds-utility-bar__item. This will add a visual indicator to communicate that the panel is opened in a new window.


Overview of CSS Classes

Selector.slds-utility-bar_container
Summary

Fixed bar at the bottom of viewport, that contains items

Supportdev-ready
Restrictfooter
VariantTrue
Selector.slds-utility-bar
Summary

Fixed bar at the bottom of viewport, contains items

Restrict.slds-utility-bar_container ul
Selector.slds-indicator_unread
Summary

Notification indicator

Restrict.slds-utility-bar abbr
Selector.slds-utility-bar__item
Summary

Items that invoke specific utility bar panel

Restrict.slds-utility-bar li
Selector.slds-utility-bar__item_pop-out
Summary

Modifier to add pop out element

Restrict.slds-utility-bar__item
ModifierTrue
Selector.slds-has-notification
Summary

Creates styles for a utility bar item when it has a notification within its panel

Restrict.slds-utility-bar__item
Selector.slds-indicator_unread
Summary

Unread notification icon

Restrict.slds-has-notification span
Selector.slds-utility-bar__action
Summary

Button that invokes utility panel

Restrict.slds-utility-bar button
Selector.slds-is-active
Summary
Restrict.slds-utility-bar__action
ModifierTrue
Selector.slds-utility-bar__text
Summary

Container for utility bar item text, allows for multi-line text output

Restrict.slds-utility-bar__action > span
Selector.slds-utility-panel
Summary

Container of the utility panel

Restrict.slds-utility-bar_container div
Selector.slds-is-open
Summary
Restrict.slds-utility-panel
ModifierTrue